<template>
    <div>
        <button @click="currentPage++">第{{ currentPage }}页</button>

        <ul>
            <li v-for="item in schoollist">{{ item.school_name }} </li>
        </ul>

        <!--  -->
        <p id='p1'>count:{{ count }}</p>
        <p @click="count++">计算属性doubleCount:{{ doubleCount }}</p>
    </div>
</template>

<script>
// watch 监听数据的变化, 然后执行异步开销大的操作
// 引入下载好的第三方包 axios


import axios from 'axios';
// console.log('axios', axios);
export default {
    data() {
        return {
            currentPage: 1,// 当期页为第一页
            // schoollist: []  // 学校列表
            count: 100
        }
    },
    computed: {
        async schoollist() {
            //console.log('计算属性');

            let res = await axios.get('https://api.i-lynn.cn/college', {
                params: {
                    page: this.currentPage
                }
            })

            // console.log(res);
            return res.data.data.list1
        },
        doubleCount() {
            return this.count * 2
        }
    },
    watch: {
        // currentPage: {
        //     handler(newvalue) {
        //         // console.log(newvalue);
        //         // 进行数据请求, 请求当前页的数据
        //         axios.get('https://api.i-lynn.cn/college', {
        //             params: {
        //                 page: newvalue
        //             }
        //         }).then(res => {
        //             console.log('res', res);
        //             this.schoollist = res.data.data.list1
        //         })
        //     },
        //     immediate: true
        // },
        doubleCount(newvalue, oldvalue) {
            console.log('this', this);
            console.log(newvalue, oldvalue);

            // this.$nextTick(() => {
            //     console.log(document.querySelector('#p1').innerHTML);
            // })
        }
    }





}
</script>
<style scoped></style>